<template>
  <div id="menu">
    <el-row class="tac">
      <el-col>
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" :router="true"
          @close="handleClose">
          <el-menu-item-group v-for="menu  in  menuList" :index="menu.path" :key="menu.name" :disabled="menu.disabled">
            <template slot="title">{{ menu.title }}</template>
            <el-menu-item v-for="menuSon in menu.children" :key="menuSon.name" :index="menuSon.path"
              :disabled="menuSon.disabled">
              {{ menuSon.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      activeIndex: 'Business',
      menuList: [
        // 数据汇总
        {
          name: 'Accommodation',//对应index
          title: '数据汇总',
          // path: '/Settings/Accommodation',
          disabled: true,
          children: [{
            name: 'Business',//对应index
            title: '营业汇总',
            path: '/Statistics/Business',

          },
          {
            name: 'Proceeds',//对应index
            title: '收款汇总',
            path: '/Statistics/Proceeds',
          }, {
            name: 'ChannelSummary',//对应index
            title: '渠道汇总',
            path: '/Statistics/ChannelSummary',
          },
          {
            name: 'GuestRoom',//对应index
            title: '客房营业汇总',
            path: '/Statistics/GuestRoom',
          },
          {
            name: 'RecordSummary',//对应index
            title: '记一笔汇总',
            path: '/Statistics/RecordSummary',
          },
          ]
        },
        // 基础报表
        {
          name: 'AccountManage',//对应index
          title: '基础报表',
          disabled: true,
          children: [
            {
              name: 'ConsumptionDetails',//对应index
              title: '消费明细报表',
              path: '/Statistics/ConsumptionDetails',
            },
          ]
        }, 
        //  交接班
        {
          name: 'ShiftWorkTable',//对应index
          title: '交接班',
          disabled: true,
          children: [
            {
              name: '/Statistics/ShiftWorkTable',//对应index
              title: '交接班表',
              path: '/Statistics/ShiftWorkTable',
            }
          ]
        },
      ]

    }
  },
  methods: {
    clickMenu() {
      console.log("点击了");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
  }
}
</script>

<style lang="scss" scoped>
#div-nav::-webkit-scrollbar {
  display: none;
}

* {
  ::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
}

.el-menu-item-group {
  ul {
    li {
      padding-left: 10px;
    }
  }
}

::v-deep .is-active {
  margin-left: 0px !important;
  padding-left: 25px !important;
  border-left: 6px solid !important;
  border-left-color: #0486fe !important;
  background-color: #f6f8ff;
}

.tac {
  .el-menu {
    position: flex;
    height: 100%;
    width: 100%;
    overflow: auto;
  }
}

#menu {
  width: 150px;
  height: 100%;
  background-color: white;
  overflow: auto;

}

/* 隐藏滚动条 */
#menu::-webkit-scrollbar {
  width: 0em;
  /* 设置滚动条宽度为0em */
}

// /* 滚动条轨道 */
// #menu::-webkit-scrollbar-track {
//   background-color: transparent; /* 设置滚动条轨道背景色 */
// }

// /* 滚动条 */
// #menu::-webkit-scrollbar-thumb {
//   background-color: transparent; /* 设置滚动条颜色 */
// }
</style>